<!DOCTYPE html>
<html>

<head>
    <title>Leaflet</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="libs/leaflet/leaflet.css">
    <link rel="stylesheet" type="text/css" href="libs/supermap-iclient/iclient-leaflet.css">
    <link rel="stylesheet" type="text/css" href="libs/leaflet-plugins/leaflet.draw/leaflet.draw.css">
    <link rel="stylesheet" type="text/css" href="libs/element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/drawControl.css">

    <style type="text/css">
        #mouseposition {
            position: absolute;
            right: 165px;
            bottom: 30px;
            z-index: 999;
            width: 200px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            vertical-align: bottom;
            text-align: center;
            overflow: hidden;
        }

        #mapzoom {
            position: absolute;
            right: 125px;
            bottom: 30px;
            z-index: 999;
            width: 28px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            vertical-align: bottom;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <script type="text/javascript" src="libs/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="libs/leaflet/leaflet-src.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/proj4-compressed.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/proj4leaflet.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/leaflet.baidu.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/leaflet.ChineseTmsProviders.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/leaflet.mapCorrection.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/Leaflet.markerRotation.js"></script>
    <script type="text/javascript" src="libs/supermap-iclient/iclient-leaflet.js"></script>
    <script type="text/javascript" src="libs/leaflet-plugins/leaflet.draw/leaflet.draw.js"></script>
    <script type="text/javascript" src="libs/turf/turf.min.js"></script>
    <script type="text/javascript" src="libs/vue/vue.js"></script>
    <script type="text/javascript" src="libs/element-ui/index.js"></script>
    <script type="text/javascript" src="libs/vuex/vuex.min.js"></script>
</head>

<body>
    <div id="map"></div>
    <div id="mouseposition"></div>
    <div id="mapzoom"></div>
    <script type="module" src="js/supermapIndex.js"></script>
</body>

</html>